<template>
  <div class="create">
    <div class="login-container">
      <div class="login-header">用户注册</div>
      <div class="login-form">
        <div class="form-group">
          <input type="text" v-model="name" placeholder="请输入您的用户名" />
        </div>
        <div class="form-group">
          <input type="password" v-model="pwd" placeholder="请输入密码" />
        </div>
        <div class="form-group">
          <input type="password" v-model="pwd1" placeholder="请确认密码" />
        </div>
        <div class="form-group">
          <input type="text" v-model="email" placeholder="请输入邮箱" />
        </div>
        <div class="form-group">
          <input type="text" v-model="yan" placeholder="请输入验证码" />
        </div>
        <div class="remember-me">
          <span>{{ arr }}</span>
          <button @click="apply()">点击生成验证码</button>
          <a href="#" @click="have()">已有账号？直接登录</a>
        </div>
        <button class="login-btn" @click="fn()">注册</button>
      </div>
    </div>
    <div class="alert" v-show="showAlert">
      <h1>{{ title }}</h1>
    </div>
  </div>
</template>

<script>
import https from "@/utils/https";
export default {
  data() {
    return {
      name: "",
      pwd: "",
      pwd1: "",
      yan: "",
      email: "",
      arr: "验证码生成区",
      autoID: 0,
      users: [],
      showAlert: false,
      title: "",
    };
  },
  mounted() {
    // this.autoID = localStorage.getItem("autoID");
    // this.users = JSON.parse(localStorage.getItem("users"));
  },
  methods: {
    apply() {
      https
        .getmassage()
        .then((a) => {
          this.arr = a.msg;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    fn() {
      // 用户名验证
      const usernameRegex =
        /^[\u4e00-\u9fa5a-zA-Z][\u4e00-\u9fa5a-zA-Z0-9]{0,23}$/;
      const passwordRegex = /^[a-zA-Z0-9]{6,24}$/;
      const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
      if (!usernameRegex.test(this.name)) {
        // alert(
        //   "用户名不能为空，不能以数字开头，不能有空格和特殊字符，且不超过24个字符"
        // );
        this.showAlert = true;
        this.title =
          "用户名不能为空，不能以数字开头，不能有空格和特殊字符，且不超过24个字符";
        setTimeout(() => {
          this.showAlert = false;
        }, 2000);
        if (this.arr != "验证码生成区") {
          this.apply();
        }
      }

      // 密码验证
      else if (!passwordRegex.test(this.pwd)) {
        this.showAlert = true;
        this.title = "密码不能为空且不能少于6位只能包含字母和数字";
        setTimeout(() => {
          this.showAlert = false;
        }, 2000);
        // alert("密码不能为空且不能少于6位只能包含字母和数字");
        if (this.arr != "验证码生成区") {
          this.apply();
        }
      } else if (this.pwd != this.pwd1) {
        // alert("两次密码不一样");
        this.showAlert = true;
        this.title = "两次密码不一样";
        setTimeout(() => {
          this.showAlert = false;
        }, 2000);
        return false;
      }

      //邮箱验证
      else if (!emailRegex.test(this.email)) {
        this.showAlert = true;
        this.title = "邮箱格式不正确，请正确填写邮箱";
        setTimeout(() => {
          this.showAlert = false;
        }, 2000);
        // alert("邮箱格式不正确，请正确填写邮箱");
        return false;
      }

      // 验证码验证
      else if (this.yan.trim() === "") {
        this.showAlert = true;
        this.title = "验证码不能为空";
        setTimeout(() => {
          this.showAlert = false;
        }, 2000);
        // alert("验证码不能为空");
        if (this.arr != "验证码生成区") {
          this.apply();
        }
      } else if (this.yan != this.arr) {
        this.showAlert = true;
        this.title = "验证码错误";
        setTimeout(() => {
          this.showAlert = false;
        }, 2000);
        // alert("验证码错误");
        if (this.arr != "验证码生成区") {
          this.apply();
        }
        return false;
      }

      if (
        usernameRegex.test(this.name) &&
        passwordRegex.test(this.pwd) &&
        this.pwd == this.pwd1 &&
        this.yan.trim() != ""
      ) {
        https
          .adduser({ name: this.name, pwd: this.pwd, emails: this.email })
          .then((a) => {
            if (a.msg == "用户名重复") {
              this.showAlert = true;
              this.title = `${a.msg}, 请更换用户名`;
              setTimeout(() => {
                this.showAlert = false;
              }, 2000);
              //   alert(`${a.msg}, 请更换用户名`);
            } else if (a.msg == "添加成功") {
              this.showAlert = true;
              this.title = "注册成功";
              setTimeout(() => {
                this.showAlert = false;
              }, 2000);
              //   alert("注册成功");
              this.name = "";
              this.pwd = "";
              this.pwd1 = "";
              this.yan = "";
              this.arr = "验证码生成区";
              this.$router.push("/loading");
            }
          })
          .catch((err) => {
            console.log(err);
          });
        // this.users.forEach((item) => {
        //   if (item.name == this.name) {
        //     alert("用户名已存在");
        //   } else {
        //     this.users.push({
        //       id: this.autoID,
        //       name: this.name,
        //       pwd: this.pwd,
        //     });
        //     this.autoID++;
        //     localStorage.setItem("autoID", this.autoID);
        //     localStorage.setItem("users", JSON.stringify(this.users));

        // }
        // });
      }
    },
    have() {
      this.$router.push("/loading");
    },
  },
};
</script>
<style lang='less' scoped>
.create {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background: url("") no-repeat;
  background-size: cover;
}
.login-container {
  background-color: #94b4db;
  padding: 30px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 350px;
}
.login-header {
  text-align: center;
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: bold;
}
.form-group {
  margin-bottom: 15px;
}
.form-group label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
}
.form-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}
.remember-me {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  font-size: 14px;
}
.remember-me input {
  margin-right: 5px;
}
.login-btn {
  width: 100%;
  padding: 10px;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}
.login-btn:hover {
  background-color: #40a9ff;
}
</style>